<template>
  <div>
    <div class="box">
      <div class="back" @click="back">
        <p>
          <van-icon name="arrow-left" />
        </p>
      </div>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in goodsDetails.pics" :key="index" @click="isShowImg">
          <img :src="item.pic" alt />
        </van-swipe-item>
      </van-swipe>
       <!-- 下面的文本介绍 -->
      <div class="title">
        <p class="p3">{{goodsDetails.basicInfo.name}}</p>
        <p class="p1">{{goodsDetails.basicInfo.characteristic}}</p>
        <div class="price">
          <div class="left">
            <p class="p2">
              <span>低价</span>
              <span class="sp2">￥{{goodsDetails.basicInfo.minPrice}}</span>
            </p>
            <p class="p1">原价{{goodsDetails.basicInfo.originalPrice}}</p>
          </div>
          <div class="p1">库存{{goodsDetails.basicInfo.stores}}</div>
        </div>
      </div>

      <van-tabs>
        <van-tab title="商品介绍">
          <div v-html="goodsDetails.content" class="content"></div>
        </van-tab>
        <van-tab title="商品评价" class="content-l">可待想象</van-tab>
      </van-tabs>
           <!-- 加入购物车的弹出层 -->
      <van-popup v-model="isShow" position="bottom" closeable :style="{ height: '31.5%' }">
        <div class="show_goods">
          <div class="cart_good">
            <div class="cart_good_img">
              <img :src="goodsDetails.pics[0].pic" width="80%" />
            </div>
            <div class="cart_good_title">
              <p>{{goodsDetails.basicInfo.name}}</p>
              <span class="sp2">￥{{goodsDetails.basicInfo.minPrice}}</span>
            </div>
          </div>
          <div class="cart_good_size">
            <span>{{goodsDetails.properties[0].name}}</span>
            <div>
              <span
                v-for="(item,index) in goodsDetails.properties[0].childsCurGoods"
                :key="index"
                class="sp3"
                @click="chooseSize(item,index)"
                :class="{active:changeIndex == index}"
              >{{item.name}}</span>
            </div>
          </div>
          <div class="cart_good_num">
            <p>购买数量</p>
            <p>
              <van-stepper v-model="value" @plus="addCar" />
            </p>
          </div>
          <div class="cart_good_buy" @click="goCarts">加入购物车</div>
        </div>
      </van-popup>
     <!-- 弹出层 -->

      <van-image-preview v-model="show" :images="images" @change="onChange">
        <template v-slot:index>第{{ index }}页</template>
      </van-image-preview>

      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
        <van-goods-action-icon icon="cart-o" text="购物车" :badge="length" to="/cart" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车" @click="showGoodsMsg" />
        <van-goods-action-button type="danger" text="立即购买" @click="showGoodsMsg" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import { Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      value: 1,
      active: "",
      changeIndex: -1,
      isShow: false,
      Toast: "1",
      index: 1,
      images: [],
      guige: "",
    };
  },
  mounted() {},
  computed: {
    goodsDetails: function () {
      console.log(this.$store.state.classfiyStore.goodsDetails);
      return this.$store.state.classfiyStore.goodsDetails;
    },
    length: function () {
      var n = 0;
      this.$store.state.cartStore.cartList.forEach((item) => {
        n += item.num;
      });
      return n;
    },
  },
  methods: {
    back() {
      this.$router.push({
        path: "/classfiy",
      });
       this.$loading();
    },
    showGoodsMsg() {
      this.isShow = !this.isShow;
    },
    addCar() {},
    chooseSize(item, index) {
      this.guige = "item";
      this.changeIndex = index;
    },
    isShowImg() {
      this.goodsDetails.pics.forEach((item) => {
        this.images.push(item.pic);
      });
      this.show = true;
    },
    onChange(index) {
      this.index = index + 1;
    },
    goCarts() {
      if (this.guige == "") {
        Notify({ type: 'warning', message: '请选择规格' })
      
      } else {
        this.$store.dispatch("ADD_CART", {
          goods: this.goodsDetails.basicInfo,
          guige: this.guige.name,
          num:this.value

        });
      Toast.success("加入成功");
      }
      this.isShow = false;
    },
  },
};
</script>

<style scoped>
.box {
  background-color: #f5f5f5;
}
.back {
  width: 0.4rem;
  height: 0.4rem;
  padding: 0.03rem;
  border-radius: 50%;
  border: 0.02rem solid pink;
  position: fixed;
  left: 0.1rem;
  top: 0.1rem;
  text-align: center;
  line-height: 0.36rem;
  z-index: 123;
}
.back p {
  width:100%;
  height: 100%;
  font-size:0.4rem;
  border-radius: 50%;
  background:pink;
  color:white;
  margin-top: 0rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 5.2rem;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 100%;
  height: 50%;
  background-color: #fff;
}
.block p {
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
}
.content {
  background-color: #fff !important;
  margin-top: 0.2rem;
  font-size:0.3rem;
  width: 100%;
}
.content-l{
  font-size:0.3rem;
}
.content >>> img {
  width: 100% !important;
  height: 100% !important;
}
.p3 {
  font-size: 0.3rem;
  color:red;
}
.p1 {
  color: gray;
  font-size:0.3rem;
}
.sp2 {
  font-size: 0.34rem;
  color:red;
  margin-left: 0.34rem;  
}
.p2 {
  font-size:0.4rem;
}
.title {
  background-color: #fff !important;
}
.show_goods {
  width: 100%;
  padding: 0rem 0.2rem;
  box-sizing: border-box;
  font-size:0.32rem;
}
.cart_good {
  width: 100%;
  display: flex;
  height: 1.23rem;
  border-bottom: 0.01rem solid;
}
.cart_good_img img {
  width: 0.85rem;
  height: 0.85rem;
  display: block;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}
.cart_good_title {
  margin-left: 0.16rem;
  font-size:0.21rem;
  width: 3.5rem;
}
.cart_good_size {
  border-bottom: 0.01rem solid #e9e9e9;
  height: 1.4rem;
}
.left {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sp3 {
  display: inline-block;
  border: 0.02rem solid #e9e9e9;
  padding: 0.1rem 0.2rem;
  border-radius: 0.06rem;
  margin-top: 0.1rem;
  margin-left: 0.1rem;
}
.cart_good_num {
  height: 0.98rem;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}
.cart_good_buy {
  width: 100%;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.22rem;
  color: white;
  background: #b7282e;
}
.active {
  border: 0.02rem solid red !important;
}
</style>